<template>
	<div class="inspection-info">
		<div class="inspection-info-list-item">
			<div class="item-info item-info-left">
				<text class="item-info-name">巡检员：</text>
				<text>张三</text>
			</div>
			<div class="item-info item-info-right">
				<text class="item-info-name">巡检时间：</text>
				<text>2025年2月第一周</text>
			</div>
		</div>
		<div class="inspection-info-list-item">
			<div class="item-info item-info-left">
				<text class="item-info-name">新农人：</text>
				<text>钱新农</text>
			</div>
			<div class="item-info item-info-right">
				<text class="item-info-name">地块编号：</text>
				<text>项目1-1</text>
			</div>
		</div>
		<div class="inspection-info-list-item">
			<div class="item-info item-info-left">
				<text class="item-info-name">面积：</text>
				<text>10亩</text>
			</div>
		</div>
		<!-- 周计划 -->
		<div class="week">
			<div class="week-ul">
				<div @click="handleWeekClick(index)" v-for="(item,index) in weekList" :key="index"
					:class="['item',activeIndex === index? 'active' : '']">{{item.name}}
				</div>
			</div>
			<div class="week-problem">
				<!-- 问题记录 -->
				<div class="problem-record">
					<div class="record">问题记录</div>
					<div class="info">
						<div class="item">
							<div class="item-label">基础信息</div>
							<div class="item-info">
								啥圣诞节阿斯顿哈师大哈师大哈桑的环啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得境撒德哈觉啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得得
							</div>
						</div>
						<div class="item">
							<div class="item-label">问题描述</div>
							<div class="item-info">啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得啥圣诞节阿斯顿哈师大哈师大哈桑的环境撒德哈觉得</div>
						</div>
						<div class="item">
							<div class="item-label">照片</div>
							<div class="item-info">
								<image @click="previewImg('https://xsxcx.linkfruits.com/4.png')" class="item-info-img"
									src="https://xsxcx.linkfruits.com/4.png" mode="widthFix"></image>
							</div>
						</div>
					</div>
				</div>
				<!-- 修改建议 -->
				<div class="problem-advice">
					<div class="advice-label">修改建议</div>
					<div class="advice-content">
						大苏打飒飒大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的大苏打飒飒的的
					</div>
				</div>
			</div>
		</div>
		<div class="confirm" @click="handleConfirm">确认</div>
		<div class="space"></div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const weekList = [{
			name: "周一",
			isSure: true
		},
		{
			name: "周二",
			isSure: false
		},
		{
			name: "周三",
			isSure: false
		},
		{
			name: "周四",
			isSure: false
		},
		{
			name: "周五",
			isSure: false
		},
		{
			name: "周六",
			isSure: false
		},
		{
			name: "周日",
			isSure: false
		}
	]
	const activeIndex = ref(0)
	const handleWeekClick = (index) => {
		activeIndex.value = index
	}
	const handleConfirm = () => {
		console.log('确认了巡检')
	}
	const previewImg = (url) => {
		uni.previewImage({
			urls: [url],
			current: url
		})
	}
</script>

<style lang="scss" scoped>
	.inspection-info {
		padding: $uni-space-default-20;
		box-sizing: border-box;

		.inspection-info-list-item {
			display: flex;
			font-size: $uni-font-size-26-rpx;
			padding: 6rpx 20rpx 6rpx 20rpx;

			.item-info {
				width: 50%;

				.item-info-name {
					font-weight: bold;
				}
			}

			.item-info:nth-of-type(2) {
				width: 60%;
			}
		}

		.week {
			width: 100%;
			margin-top: $uni-space-default-20;
			margin-left: 5rpx;
			font-size: $uni-font-size-26-rpx;

			.week-ul {
				width: 700rpx;
				background-color: #cccc;
				display: flex;

				.item {
					width: calc(700rpx / 7);
					height: 80rpx;
					color: white;
					line-height: 80rpx;

					box-sizing: border-box;
					text-align: center;

				}
			}

			.active {
				background-color: #B3CCF4 !important;
			}

			.week-problem {
				width: 700rpx;
				border: 2rpx solid $uni-border-color;
				box-sizing: border-box;

				.problem-record {
					width: 100%;
					min-height: 39vh;
					display: flex;
					border-bottom: 2rpx solid $uni-border-color;
					box-sizing: border-box;

					.record {
						width: 78rpx;
						border-right: 2rpx solid $uni-border-color;
						font-weight: bold;
						// 文字y轴排列
						writing-mode: vertical-rl;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.info {
						width: 620rpx;

						.item {
							width: 100%;
							min-height: 13vh;
							display: flex;
							border-bottom: 2rpx solid $uni-border-color;

							.item-label {
								width: 180rpx;
								min-height: 13vh;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: bold;
								border-right: 2rpx solid $uni-border-color;
							}

							.item-info {
								width: 440rpx;
								min-height: 10vh;
								padding: $uni-space-default-20;
								box-sizing: border-box;

								.item-info-img {
									width: 100%;
								}
							}

						}

						.item:last-child {
							border: none;
						}
					}
				}

				.problem-advice {
					width: 100%;
					display: flex;

					.advice-label {
						width: 260rpx;
						min-height: 10vh;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: center;
						border-right: 2rpx solid $uni-border-color;
					}

					.advice-content {
						width: 440rpx;
						min-height: 10vh;
						padding: $uni-space-default-20;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>